<template>
  <div>
    <headerNav @loadList="headerData"/>
    <div>
      <div @mouseleave="divLeave">
        <sideNav :data="sideNavData" :styles="sideNavStyle" @listOver="listOver" @clickDetails="clickDetails" />
        <childrenNav ref="childrenNav" v-show="isShow" @linkDetails="linkDetails" :childrenStyle="childrenStyle" />
      </div>
      <div>
        <img :src="getImgUrl(currentImg)" :alt="currentImg.title">
      </div>
    </div>
  </div>
</template>

<script>
import { getDefaultData } from "@/js/api/home";
import sideNav from "@/components/index/sideNav";
import childrenNav from "@/components/index/childrenNav";
import headerNav from "@/components/index/headerNav";
export default {
  name:'home',
  components:{
    sideNav,
    childrenNav,
    headerNav
  },
  data(){
    return{
      list:[],
      sideNavData:[],
      sideNavStyle:{
        width:'180px',
        height:'430px'
      },
      isShow:false,
      homeImg:[
        {title:'图1',src:'home/img_1.svg'},
        {title:'图2',src:'home/img_2.svg'},
        {title:'图3',src:'home/img_3.svg'},
        {title:'图4',src:'home/img_4.svg'},
        {title:'图5',src:'home/img_5.svg'},
        {title:'图6',src:'home/img_6.svg'},
      ],
      currentImg: {index:0,title:'图1',src:'home/img_1.svg'},
      currentIndex:0,
      childrenData:[],
      sonPageShow : false,
      sideNavCurrentIndex:0
    }
  },
  computed:{
    spanNum:function(){
      return parseInt(24/(this.list.length))
    },
    childrenStyle:function(){
      let obj = {
        width:'600px',
        marginLeft: this.sideNavStyle.width,
        height: this.sideNavStyle.height
      }
      return obj
    }
  },
  mounted(){
    this.utils.time.setInterval(this.action,3000)
  },
  created(){
    this.loadList()
  },
  methods:{
    loadList(){
      getDefaultData().then(response=>{
        if(response.data.state){
          this.sideNavData = response.data.data
        }
      })
    },
    action(){
      let homeImgNums = this.homeImg.length-1
      if(this.currentIndex<=homeImgNums){
        this.currentImg = this.homeImg[this.currentIndex]
        if(this.currentIndex>=homeImgNums){
          this.currentIndex = 0
        }else{
          this.currentIndex++
        }
      }
    },
    headerData(val){
      this.list = JSON.parse(val)
    },
    mouseLeave(val){
      val.target.style.background = "white"
    },
    listOver(val){
      this.sideNavCurrentIndex = val
      this.isShow = true
      if(this.isShow){
        this.$refs.childrenNav.show(this.sideNavData[val])
        this.sonPageShow = true
      }
    },
    linkDetails(val){
      val.action = 2
      this.$router.push({name: 'goodsDetails', params: {obj: JSON.stringify(val)}});
    },
    divLeave(){
      this.isShow = false
    },
    getImgUrl(url){
      return require("@/assets/img/"+url.src);
    },
    clickDetails(val){
      let current
      for(let i of this.list){
        if(i.label == val.label&&i.type == val.value){
          current = i
        }
      }
      if(current != undefined){
        this.$router.push({name: 'goodsList', params: {type: current.type}});
      }else{
        this.utils.tips.error("该类型商品还没有上线，请耐心等待。")
      }
    }
  }
}
</script>
<style lang="less">
</style>